.neo-grid-cell {
    .neo-progress-wrapper {
        progress[value] {
            appearance: none;
            border    : none;
            display   : flex;
            height    : var(--grid-cell-progress-height);

            @-moz-document url-prefix() {
                background-color: var(--grid-cell-progress-track-color);
                border-radius   : var(--grid-cell-progress-border-radius);
                box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.25) inset;
            }

            // for webkit the progress-bar is the track
            &::-webkit-progress-bar {
                background-color: var(--grid-cell-progress-track-color);
                border-radius   : var(--grid-cell-progress-border-radius);
                box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.25) inset;
            }

            // for mozilla the progress-bar is the active range
            &::-moz-progress-bar {
                background-color: var(--grid-cell-progress-active-color);
                border-radius   : var(--grid-cell-progress-border-radius);
            }

            &::-webkit-progress-value {
                background-color: var(--grid-cell-progress-active-color);
                border-radius   : var(--grid-cell-progress-border-radius);
            }
        }
    }
}
